<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>抽奖系统</title>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/elementui.js"></script>
    <script src="./js/moment.min.js"></script>
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/choujiang.css" />
    <link rel="stylesheet" href="./css/elementui.css" />
    <link rel="stylesheet" type="text/css" href="./css/toastr.min.css" />
    <script type="text/javascript" src="./js/toastr.min.js"></script>
    <script src="./js/choujiang.js"></script>
  </head>
  <body>
    <div id="pageBg"  class="danmu-container">
      <div class="choujiang" v-if="step==1">
        <div class="choujiangtitle">奖品设置</div>
        <el-form ref="form"  label-width="80px">
            <el-form-item label="选择奖品">
                <el-select v-model="jpid" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
            </el-form-item>
            <el-form-item label="奖品个数">
                <el-input v-model="count"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="moveed"
                >开始</el-button
            >
            </el-form-item>
           
        </el-form>
        
      </div>
      <div class="choujiangdonghua">
          <canvas id="canvas"></canvas>
      </div>
      <div class="scanWrap">
       
        <el-button type="primary" v-if="step==2" @click="end">停止</el-button>
      </div>
      <div class="priceDetail" v-if="step==3">
        <div class="priceDetailHeader">
          <div class="priceDetailHeaderTitle">中奖清单</div>
          <div class="priceDetailHeaderClose" @click="tostart"><i class="el-icon-close"></i></div>
        </div>
        <div class="listline">
          <div v-for="item in priceList" class="headeritem">
            <img :src="item.avatarUrl"/>
            <div class="name">
              <div class="nikeName">
                {{item.nickName}}
              </div>
              <div class="phone">
                {{item.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}}
              </div>
              
            </div>
        </div>
        </div>
        
      </div>
    </div>

    <script>
      window.userlist = [];
      new Vue({
        el: "#pageBg",
        data: {
          step:1,
          jpid: "",
          count:'',
          priceList:[],
          options: [
            {
              value: "0",
              label: "特等奖",
            },
            {
              value: "1",
              label: "一等奖",
            },
            {
              value: "2",
              label: "二等奖",
            },
            {
              value: "3",
              label: "三等奖",
            },
            {
              value: "4",
              label: "四等奖",
            },
            {
              value: "5",
              label: "五等奖",
            },
          ],
        },
        mounted() {
          this.getAllUsers();
          // setInterval(() => {
          //   this.getAllUsers();
          // }, 4000);
        },
        methods: {
            moveed() {
              this.step=2;
              window.speed = 1.03;
            },
            tostart(){
              this.step=1;
              window.speed = 1.005;
              this.jpid = '';
              this.count = '';
            },
            getAllUsers(){
              $.ajax({
                    url: "/api/user/query",
                    method: "GET",
                    contentType: "application/json",
                    success: (res) => {
                        console.log(res);
                        window.userlist = res;
                        restart();
                    },
                    error: function () {},
                });
            },
            getPriceList() {
                $.ajax({
                    url: "/api/price/query",
                    method: "GET",
                    contentType: "application/json",
                    success: (res) => {
                        console.log(res);
                        this.priceList = res;
                        this.step=3;
                    },
                    error: function () {},
                });
            },
            end() {
                $.ajax({
                url: "/api/price/cj",
                method: "POST",
                contentType: "application/json",
                data: JSON.stringify({
                    price_type: this.jpid,
                    count:Number(this.count)
                }),
                success: (res) => {
                    this.getPriceList();
                },
                error: function () {
                  toastr.error('抽奖人数大于未中奖总人数');
                },
                });
          },
        },
      });
    </script>
  </body>
</html>
